<template>
	<div class="zuzhijigo">
		<transition name="mybox2">
			<div class="left" v-show="cebian_show">
				<div class="topNav"><i class="el-icon-document"></i><p>&nbsp;组织机构管理</p></div>
				<!--树状图带筛选-->
				<div class="bottomNav">
					<el-input
					  placeholder="输入关键字进行过滤"
					  v-model="filterText">
					</el-input>
					
					<el-tree
					  class="filter-tree"
					  :data="data2"
					  :props="defaultProps"
					  default-expand-all
					  :filter-node-method="filterNode"
					  ref="tree2"
					  @node-click="node_click">
					</el-tree>
				</div>
				

				
				
			</div>
		</transition>
		
		<!--中间的线-->
		<div class="line_div"></div>
		
		<div class="right">
			<div class="topNav"><i class="el-icon-news"></i><p>&nbsp;组织机构管理</p></div>
			
			<div class="rigth_bottom">
				<!--头部按钮部分-->
				<div class="btn">
					<div class="dd1">
						<el-button type="primary" icon="el-icon-plus">添加</el-button>
						<el-button type="primary" icon="el-icon-sold-out">导入</el-button>
						<el-dropdown>
							<el-button type="primary">
							    更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
							</el-button>
							<el-dropdown-menu slot="dropdown">
							    <el-dropdown-item><i class="layui-icon layui-icon-password"></i>&nbsp;锁定</el-dropdown-item>
							    <el-dropdown-item><i class="el-icon-news"></i>&nbsp;解锁</el-dropdown-item>
							    <el-dropdown-item><i class="el-icon-success"></i>&nbsp;重置密码</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</div>
					
					<div class="dd2">
						<el-input  placeholder="请输入用户ID" suffix-icon="el-icon-date" class="dd2_1" v-model="input1"></el-input>
						<el-button type="primary" icon="el-icon-search" @click="layui_sousuo">搜索</el-button>
						
						<el-popover
						  placement="bottom"
						  width="250"
						  height='500'
						  v-model="visible2"
						  trigger="click">
						  <ul>
						    <li style="display: flex;margin-bottom: 10px;"><p style="white-space: nowrap;line-height: 30px;margin-right: 10px;">账户名称</p><el-input v-model="input" placeholder="输入账户名称" suffix-icon="el-icon-date"></el-input></li>
						    <li style="display: flex;margin-bottom: 10px;"><p style="white-space: nowrap;line-height: 30px;margin-right: 10px;">员代码工</p><el-input v-model="input" placeholder="输入员代码工" suffix-icon="el-icon-date"></el-input></li>
						    <li style="display: flex;margin-bottom: 10px;"><p style="white-space: nowrap;line-height: 30px;margin-right: 10px;">员工姓名</p><el-input v-model="input" placeholder="输入员工姓名" suffix-icon="el-icon-date"></el-input></li>
						    <!--<li style="display: flex;margin-bottom: 10px;"><p style="white-space: nowrap;line-height: 30px;margin-right:40px;">作者</p><el-input v-model="input" placeholder="输入作者" suffix-icon="el-icon-date"></el-input></li>-->
						    <li style="display: flex;margin-bottom: 10px;justify-content: space-around;">
						    	<el-button type="primary" size="mini" icon="el-icon-plus">搜索</el-button>
								<el-button type="primary" size="mini" icon="el-icon-delete">重置</el-button>
								<el-button type="primary" size="mini" icon="el-icon-goods" @click="visible2 = false">取消</el-button>
						    </li>
						  </ul>
						  <el-button type="primary" slot="reference">高级搜索<i class="el-icon-arrow-down el-icon--right"></i></el-button>
						</el-popover>
						
					</div>
				</div>
				
				<!--数据表格部分-->
				<div class="table">
					<table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>
					<script type="text/html" id="barDemo">
					  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
					  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
					  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
					</script>
				</div>
				
			</div>
			
			
			<!--收缩侧边栏按钮-->
			<div class="shousuo" @click="guanbi"><i class="el-icon-caret-left"></i></div>
		</div>
		
	</div>
</template>

<script>
	export default{
		name:'zuzhijigo',
		data(){
			return{
				cebian_show:true,//控制侧边栏展开和收起
				visible2:false,//控制高级搜索显示和隐藏
				input:'',
				input1:'',//搜索的输入框
				//树状图带筛选
				filterText: '',
		        data2: [{
		          id: 1,
		          label: '铜冠信息科技有限责任公司',
			        children: [{
		            	id: 2,
		            	label: '研发部',
			            children: [{
			              id: 9,
			              label: 'ERP项目组'
			            }, {
			              id: 10,
			              label: 'OA项目组'
			            },{
			              id: 11,
			              label: '流程平台项目组'
			            }]
		          	},{
		          		id: 3,
		          		label: '项目部',
			          	children: [{
			            	id: 5,
			            	label: '项目一部'
			          	}, {
			            	id: 6,
			            	label: '项目二部'
			          	}, {
			            	id: 7,
			            	label: '项目三部'
			          	}]
			        }]
		        }],
		        defaultProps: {
		          children: 'children',
		          label: 'label'
		        },
		        
		        
		        
			}
		},
		mounted(){
			this.layui()
		},
		watch:{
			//树状图带筛选
		    filterText(val) {
		    	console.log(val)
		        this.$refs.tree2.filter(val);
		    }
		},
		methods:{
			layui(){
				layui.use('table', function(){
				  	var table = layui.table;
				  
				  	//第一个实例
				  	table.render({
					    elem: '#LAY_table_user'
					    ,id: 'testReload'
					    ,url: '../../../../../static/json/zuzhijigo.json' //数据接口
					    ,page: true //开启分页
					    ,limit: 10 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
					    ,cols: [[ //表头
					    	{type:'checkbox'}
					      	,{field: 'id', title: '账户ID', width:100, sort: true}
					      	,{field: 'username', title: '账户名称', width:100}
					      	,{field: 'sex', title: '性别', width:80, sort: true}
					      	,{field: 'code', title: '员工代码', width:100, sort: true}
					      	,{field: 'city', title: '员工地址', width:100} 
					      	,{field: 'sign', title: '多点登陆', width: 100}
					      	,{field: 'experience', title: '创建人', width: 80, sort: true}
					      	,{field: 'classify', title: '操作', width: 180,toolbar: '#barDemo'}
					    ]]
					});
					
					 //监听工具条
					table.on('tool(user)', function(obj){
					    var data = obj.data;
					    if(obj.event === 'detail'){
					      layer.msg('ID：'+ data.id + ' 的查看操作');
					    } else if(obj.event === 'del'){
					      layer.confirm('真的删除行么', function(index){
					        obj.del();
					        layer.close(index);
					      });
					    } else if(obj.event === 'edit'){
					      layer.alert('编辑行：<br>'+ JSON.stringify(data))
					    }
					});
					
					  
				});
			},
			//点击搜索
			layui_sousuo(){
				let table = layui.table;
				let input1 = this.input1
				
			    //执行重载
			    table.reload('testReload', {//testReload你要重新渲染哪个表格
			        page: {
			          curr: 1 //重新从第 1 页开始
			        }
			        ,where: {
			            id: input1,
			        }
			    });
				
			},
			//树状图带筛选
			filterNode(value, data){
				console.log(value, data)
		        if (!value) return true;
		        return data.label.indexOf(value) !== -1;
		   	},
		   //点击树状节点
			node_click(res){
				console.log(res)
			},
			
			
			//点击关闭侧边栏按钮
		    guanbi(){
		    	this.cebian_show=!this.cebian_show
		    }
		},
	}
</script>

<style scoped="scoped" lang="scss">
	.zuzhijigo{
		width: 98%;height: 95%;padding: 10px;background: #f2f2f2;min-width: 1000px;display: flex;
		.left{
			height: 100%;width:220px;background: white;
			.topNav{
				display: flex;height: 40px;background: #f2f2f2;
				.el-icon-document{font-size: 20px;background: #4b9a23;border-radius: 5px;color: white;width: 30px;height: 30px;margin-top: 5px;line-height: 30px;}
				p{line-height: 40px;}
			}
			.bottomNav{
				padding: 10px;box-sizing: border-box;
			}
			
		}
		/*中间的线div*/
		.line_div{border-left:1px solid #ddd ;width: 1px;height: 100%;margin:0 5px;}
		
		.right{
			background:white;height:100%;width: 81%;z-index: 10;
			.topNav{
				display: flex;height: 40px;background: #f2f2f2;
				.el-icon-news{font-size: 20px;background: #4b9a23;border-radius: 5px;color: white;width: 30px;height: 30px;margin-top: 5px;line-height: 30px;}
				p{line-height: 40px;}
			}
			
			.rigth_bottom{
				margin: 10px;
				.btn{
					display: flex;justify-content: space-between;
					.dd2{
						display: flex;
						.dd2_1{margin-right: 5px;}
					}
				}
				.table{margin-top: 20px;border: 1px solid #ddd;}
			}
			
			.shousuo{
				position: absolute;bottom: 10%;width: 25px;height: 50px;background: #ddd;line-height: 50px;text-align: center;cursor: pointer;color: white;
			}
			.shousuo:hover{background: #409EFF;}
		}
		
	}
	/*控制侧边栏展开和收缩动画*/
    .mybox2-leave-active,.mybox2-enter-active{
        transition:  all 1s ease; 
    }
    .mybox2-leave-active,.mybox2-enter{
        width:0px !important;
    }
    .mybox2-leave,.mybox2-enter-active{
        width:220px;
    }
</style>